<template>
  <!-- 订单 -->
  <view class='content'>
    <view class="ProjectList">
      <view class="project" v-for="item in list" :key="item.id">
        <view class="title">{{ item.name }}</view>
        <view class="principal">
          <view class="principal info">
            <u-icon name="tags-fill" color="#ed6f1a" size="20"></u-icon>
            <text>{{ item.post }}</text>
          </view>
          <view class="principal info">
            <u-icon name="account-fill" color="#ed6f1a" size="20"></u-icon>
            <text>{{ item.userName }}</text>
          </view>
        </view>
        <view class="projectTime">
          <u-icon name="clock-fill" color="#ed6f1a" size="15"></u-icon>
          <text>{{ item.time }}</text>
        </view>
        <view class="tag" style="background:#F9AB2F ;" v-if="item.state == 1">
          进行中
        </view>
        <view class="tag" style="background:#2f47f9 ;" v-if="item.state == 2">
          已完成
        </view>
        <view class="tag" style="background:#f9d52f ;" v-if="item.state == 3">
          待开始
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: '校宇通项目',
          post: '开发',
          userName: '张涛',
          time: '2022.12.20-2023.01.20',
          state: '1',
          id: 3
        },
        {
          name: '煮酒项目',
          post: '开发',
          userName: '张涛',
          time: '2022.12.20-2023.01.20',
          state: '3',
          id: 4
        },
        {
          name: 'SX项目',
          post: '开发',
          userName: '张涛',
          time: '2022.12.20-2023.01.20',
          state: '2',
          id: 1
        },
        {
          name: '中值官网',
          post: '开发',
          userName: '张涛',
          time: '2022.12.20-2023.01.20',
          state: '2',
          id: 2
        },

      ]
    }
  },
  methods: {
  },
}
</script>

<style scoped lang='less'>
.ProjectList {
  .project {
    position: relative;
    background: #FFFFFF;
    box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(0, 0, 0, 0.03);
    border-radius: 10rpx;
    padding: 25rpx;
    margin-bottom: 20rpx;

    .title {
      font-size: 30rpx;
      font-weight: 400;
      color: #707070;
      margin-bottom: 20rpx;
    }

    .principal,
    .projectTime {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      font-weight: 400;
      color: #707070;
      line-height: 48rpx;

      .u-icon {
        margin-right: 12rpx;
      }

      .info {
        width: 200rpx;
      }
    }

    .tag {
      position: absolute;
      right: 0;
      top: 0;
      width: 121rpx;
      height: 53rpx;
      background: #F9AB2F;
      border-bottom-left-radius: 100rpx;
      border-top-right-radius: 10rpx;
      font-size: 20rpx;
      font-weight: 400;
      color: #FFFFFF;
      text-align: center;
      line-height: 53rpx;

    }
  }
}
</style>
